#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<!--Bootstrap Table [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<!--Switchery [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/switchery/switchery.min.css" rel="stylesheet">
<!--Animate.css [ OPTIONAL ]-->
<!--<link href="#(RESOURCE_HOST)/static/plugins/animate-css/animate.min.css" rel="stylesheet">-->
<!--X-editable [ OPTIONAL ]-->
<link href="#(RESOURCE_HOST)/static/plugins/x-editable/css/bootstrap-editable.css" rel="stylesheet">
#end

#define js()
<!--Bootstrap Table Sample [ SAMPLE ]-->
<script src="#(RESOURCE_HOST)/static/js/demo/bstableFormatter.js"></script>

<script src="#(RESOURCE_HOST)/static/js/sysrole/sys_role_table.js"></script>

<script src="#(RESOURCE_HOST)/static/js/demo/Auth-Utils.js"></script>

<!--Bootbox Modals [ OPTIONAL ]-->
<!--<script src="#(RESOURCE_HOST)/static/plugins/bootbox/bootbox.min.js"></script>-->

<!--Switchery [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/switchery/switchery.min.js"></script>

<!-- Switchery Utils -->
<script src="#(RESOURCE_HOST)/static/js/demo/switchery-Utils.js"></script>

<!--X-editable [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/x-editable/js/bootstrap-editable.min.js"></script>

<!--Bootstrap Table [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>

<!--Bootstrap Table Extension [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>



#end

#define content()
<div id="container">
    <!--<div class="boxed">-->
    <!--CONTENT CONTAINER-->
    <!--===================================================-->
    <!--<div id="content-container">-->

    <div id="page-content">

        <!--Editable - combination with X-editable-->
        <!--===================================================-->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">角色列表</h3>
            </div>
            <div class="panel-body">
                <button id="demo-add-row" class="btn btn-primary btn-labeled icon-lg fa fa fa-plus">增加</button> &nbsp;&nbsp;
                <button id="demo-delete-row" disabled class="btn btn-danger btn-labeled icon-lg fa fa-times">删除</button>
                <table id="demo-editable"
                       data-search="true"
                       data-show-refresh="true"
                       data-toolbar="#demo-delete-row,#demo-add-row"
                       data-show-toggle="true"
                       data-show-columns="true"
                       data-page-list="[15, 20, 30]"
                       data-page-size="15"
                       data-pagination="true" data-show-pagination-switch="true">
                </table>
            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--End page content-->
    <!--</div>-->

    <!--</div>-->

    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>


    <!--Default Bootstrap Modal-->
    <!--===================================================-->
    <div class="modal fade" id="demo-default-modal" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <!--Modal header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i>
                    </button>
                    <h4 class="modal-title">角色编辑</h4>
                </div>

                <!--Modal body-->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <form class="form-horizontal">

                                <div class="form-group hidden">
                                    <label class="col-md-3 control-label" for="id">ID</label>
                                    <div class="col-md-7">
                                        <input id="id" name="id" type="text" placeholder="id"
                                               class="form-control input-md">
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="name">角色名称</label>
                                    <div class="col-md-7">
                                        <input id="name" name="name" type="text" placeholder="角色名称"
                                               class="form-control input-md">
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="iconcls">ICON</label>
                                    <div class="col-md-7">
                                        <input id="iconcls" name="iconcls" type="text" placeholder="iconcls"
                                               class="form-control input-md">
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-lg-3 control-label" for="status">是否启用</label>
                                    <div class="col-lg-7">
                                        <!--Switchery : Checked-->
                                        <!--===================================================-->
                                        <input id="status" class="form-control" type="checkbox" name="status" checked >
                                        <!--===================================================-->
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="des">描述</label>
                                    <div class="col-md-7">
                                        <textarea id="des" name="des" rows="5" cols="20" placeholder="角色描述"
                                                  class="form-control input-md"> </textarea>
                                        <span class="help-block"></span>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>

                <!--Modal footer-->
                <div class="modal-footer">
                    <button id='save' class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--===================================================-->
    <!--End Default Bootstrap Modal-->
</div>

#end